<template>
  <div class="app-container">
    <div class="step-list">
      <el-steps :active="activestep" simple finish-status="success">
        <el-step title="选择商品品类" ></el-step>
        <el-step title="填写商品详情" ></el-step>
        <el-step title="商品发布成功" ></el-step>
      </el-steps>
    </div>
    <!-- 第一步 选择分类 -->
    <first-step ref='first' v-show="activestep === 1" @change="getFirstData"></first-step>
    <!-- 第二步 商品详细信息 -->
    <second-step ref='second' :firstData="firstData" v-if="activestep === 2" @change="getSecondData"></second-step>
    <!-- 第三步 发布完成 -->
    <third-step ref='third' v-if="activestep === 3"></third-step>


  </div>
</template>
<script>
import FirstStep from  './goodsOperationFirst'
import SecondStep from  './goodsOperationSec'
import ThirdStep from  './goodsOperationThird'
export default {
  name: "addGoods",
  components: {
    FirstStep,
    SecondStep,
    ThirdStep
  },

  data() {
    return {
      /** 当前激活步骤*/
      activestep: 1,
      firstData: {}, // 第一步传递的数据
    };
  },
  methods: {
    // 选择商品分类回调
    getFirstData (item) {
      this.firstData = item;
      this.activestep = 2;
    },
    getSecondData (item) {
      this.activestep = 3;
    }
  },
  mounted() {
    // 编辑商品、模板
    if (this.$route.query.id || this.$route.query.draftId) {
      this.activestep = 2;
    } else {
      this.activestep = 1
      this.$refs.first.selectGoodsType = true;
    }

  }
};
</script>
